<template>
  <div class="heritage-list-container">
    <!-- 顶部搜索和筛选区域 -->
    <div class="search-section">
      <div class="search-wrapper">
        <el-input
          v-model="searchQuery"
          placeholder="搜索非遗项目名称、地区、传承人..."
          class="search-input"
          :prefix-icon="Search"
          clearable
          @input="handleSearch"
        />
        <el-select
          v-model="selectedRegion"
          placeholder="选择地区"
          class="region-select"
          clearable
        >
          <el-option
            v-for="region in regions"
            :key="region"
            :label="region"
            :value="region"
          />
        </el-select>
        <el-select
          v-model="selectedLevel"
          placeholder="保护级别"
          class="level-select"
          clearable
        >
          <el-option
            v-for="level in levels"
            :key="level"
            :label="level"
            :value="level"
          />
        </el-select>
      </div>
    </div>

    <!-- 分类标签页 -->
    <div class="tabs-section">
      <el-tabs 
        v-model="activeTab" 
        class="heritage-tabs"
        @tab-click="handleTabClick"
      >
        <el-tab-pane label="全部项目" name="all">
          <div class="category-tags">
            <el-tag
              v-for="cat in categories"
              :key="cat"
              :class="{ active: selectedCategory === cat }"
              @click="selectedCategory = cat"
              class="category-tag"
            >
              {{ cat }}
            </el-tag>
          </div>
        </el-tab-pane>
        <el-tab-pane 
          v-for="cat in categories" 
          :key="cat" 
          :label="cat" 
          :name="cat"
        />
      </el-tabs>
    </div>

    <!-- 列表展示区域 -->
    <div class="list-section">
      <el-row :gutter="24">
        <el-col 
          v-for="item in filteredList" 
          :key="item.id" 
          :xs="24" 
          :sm="12" 
          :md="8" 
          :lg="6"
          class="mb-6"
        >
          <el-card 
            class="heritage-card"
            :body-style="{ padding: '0px' }"
            @click="goToDetail(item.id)"
          >
            <div class="image-wrapper">
              <img :src="item.cover" :alt="item.name" class="cover-image" />
              <div class="card-overlay">
                <el-button type="primary" size="small" round>
                  查看详情
                </el-button>
              </div>
            </div>
            <div class="card-content">
              <h3 class="heritage-name">{{ item.name }}</h3>
              <div class="heritage-meta">
                <el-tag size="small" type="success" class="region-tag">
                  <el-icon><Location /></el-icon>
                  {{ item.region }}
                </el-tag>
                <el-tag size="small" type="warning" class="level-tag">
                  <el-icon><Star /></el-icon>
                  {{ item.level }}
                </el-tag>
              </div>
              <p class="heritage-desc">{{ item.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页器 -->
      <div class="pagination-wrapper" v-if="totalPages > 1">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[12, 24, 36, 48]"
          :total="totalItems"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 空状态展示 -->
    <el-empty
      v-if="filteredList.length === 0"
      description="暂无相关非遗项目"
    >
      <el-button type="primary" @click="resetFilters">重置筛选</el-button>
    </el-empty>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useHeritageStore } from '../stores/heritageStore';
import { Search, Location, Star } from '@element-plus/icons-vue';

const router = useRouter();
const heritageStore = useHeritageStore();

// 状态管理
const activeTab = ref('all');
const searchQuery = ref('');
const selectedCategory = ref('');
const selectedRegion = ref('');
const selectedLevel = ref('');
const currentPage = ref(1);
const pageSize = ref(12);

// 数据
const categories = ['剪纸', '陶瓷', '刺绣', '木雕', '漆器', '织锦', '皮影', '年画'];
const regions = ['北京', '上海', '江苏', '浙江', '广东', '四川', '云南', '陕西'];
const levels = ['国家级', '省级', '市级', '县级'];

// 计算属性
const filteredList = computed(() => {
  let list = heritageStore.heritageList;
  
  // 分类筛选
  if (activeTab.value !== 'all') {
    list = list.filter(item => item.category === activeTab.value);
  }
  
  // 搜索筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    list = list.filter(item => 
      item.name.toLowerCase().includes(query) ||
      item.description.toLowerCase().includes(query) ||
      item.region.toLowerCase().includes(query)
    );
  }
  
  // 地区筛选
  if (selectedRegion.value) {
    list = list.filter(item => item.region === selectedRegion.value);
  }
  
  // 级别筛选
  if (selectedLevel.value) {
    list = list.filter(item => item.level === selectedLevel.value);
  }
  
  // 分类标签筛选
  if (selectedCategory.value) {
    list = list.filter(item => item.category === selectedCategory.value);
  }
  
  return list;
});

const totalItems = computed(() => filteredList.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

// 方法
const handleSearch = () => {
  currentPage.value = 1;
};

const handleTabClick = () => {
  selectedCategory.value = '';
  currentPage.value = 1;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const resetFilters = () => {
  searchQuery.value = '';
  selectedRegion.value = '';
  selectedLevel.value = '';
  selectedCategory.value = '';
  activeTab.value = 'all';
  currentPage.value = 1;
};

const goToDetail = (id) => {
  router.push(`/heritage/${id}`);
};

// 生命周期
onMounted(async () => {
  if (heritageStore.heritageList.length === 0) {
    await heritageStore.fetchHeritageData();
  }
});
</script>

<style scoped>
.heritage-list-container {
  @apply min-h-screen bg-gray-50;
}

.search-section {
  @apply bg-white shadow-sm sticky top-0 z-10;
}

.search-wrapper {
  @apply max-w-7xl mx-auto p-4 flex gap-4 items-center;
}

.search-input {
  @apply flex-1;
}

.region-select,
.level-select {
  @apply w-40;
}

.tabs-section {
  @apply bg-white border-b;
}

.heritage-tabs {
  @apply max-w-7xl mx-auto;
}

.category-tags {
  @apply flex flex-wrap gap-2 p-4;
}

.category-tag {
  @apply cursor-pointer transition-colors;
}

.category-tag.active {
  @apply bg-primary-500 text-white;
}

.list-section {
  @apply max-w-7xl mx-auto p-6;
}

.heritage-card {
  @apply cursor-pointer transition-all duration-300 hover:shadow-lg;
}

.image-wrapper {
  @apply relative overflow-hidden aspect-[4/3];
}

.cover-image {
  @apply w-full h-full object-cover transition-transform duration-300;
}

.heritage-card:hover .cover-image {
  @apply scale-110;
}

.card-overlay {
  @apply absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 transition-opacity duration-300;
}

.heritage-card:hover .card-overlay {
  @apply opacity-100;
}

.card-content {
  @apply p-4;
}

.heritage-name {
  @apply text-lg font-semibold text-gray-800 mb-2 line-clamp-1;
}

.heritage-meta {
  @apply flex gap-2 mb-2;
}

.region-tag,
.level-tag {
  @apply flex items-center gap-1;
}

.heritage-desc {
  @apply text-gray-600 text-sm line-clamp-2;
}

.pagination-wrapper {
  @apply flex justify-center mt-8;
}

:deep(.el-tabs__nav-wrap::after) {
  @apply h-[1px];
}

:deep(.el-card__body) {
  @apply p-0;
}
</style>